<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 45px;
            border: 1px red solid;
            overflow: hidden;
            text-overflow: ellipsis;
            /*太弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp: 2;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <!-- 

        2.多行文本溢出显示省略号

        多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)

        overflow : hidden;
        text-overflow: ellipsis;
        /太弹性伸缩盒子模型显示*/
        display: -webkit-box ;
        /*限制在一个块元素显示的文本的行数*/
        -webkit-line-clamp : 2;
        /*设置或检索伸缩盒对象的子元素的排列方式*/
        -webkit-box-orient : vertical;

        更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

     -->
    <div>中国底层小镇的经济到底什么样？在贵州铜仁度过7天假期后，说说我的真实观察</div>
</body>

</html>